<template>

	<el-container class="container">
		<el-header style="text-align:center">
			<nagivation ref="nagivation" />
		</el-header>

		<el-row :gutter="50" type="flex" justify="center">
			<el-col :span="16">
				<div>

					<div v-for="(item, index) in article" :key="item.articleId" ref="attentionbutton"
						style="border:1px black solid;margin:10px;position: relative;overflow:auto"
						class="infinite-list" v-infinite-scroll="load">
						<div style="position:absolute;top:20px;left:15px;color: darkgray;">
							<el-tag>{{ item.createTime }}</el-tag>
							<el-tag>阅读总数是{{ item.viewCount }}</el-tag>
						</div>
						<div style="text-align:center">
							<div>
								<h1 class="articleTitle">{{ item.title }}</h1>
							</div>
							<div class="avatarAndUsername">
								<el-avatar :src="item.avatar" style="margin-left:100px" size="medium"></el-avatar>
								<span class="findUser" @click="findUser(item.userId)">{{ item.username }}:</span>
							</div>
						</div>
						<div class="content">
							<div class="text more" ref="more">
								占位
							</div>
							<div class="text">
								<div :class="{ 'retract': item.status }"
									:style="{ 'max-height': item.status ? textHeight : '' }" ref="textContainer">
									<p v-html="item.content"></p>
								</div>
								<div class="btn">
									<p v-if="item.status" @click="item.status = false; updateViewCount(item.articleId)">
										展开</p>
									<p v-if="item.status == false" @click="item.status = true">收起</p>
								</div>
							</div>
						</div>
						<div>
							<el-badge is-dot class="item">
								<el-button size="small" @click="expansion(item.articleId)">评论</el-button>
							</el-badge>
							<el-badge is-dot class="item">
								<el-button size="small" @click="expansion(item.articleId)">回复</el-button>
							</el-badge>
							<el-button type="primary" style="margin-left:20px" v-if="item.showButton"
								@click="changeShowButton(item.userId, index)" :key="item.articleId">关注</el-button>
							<el-button type="primary" style="margin-left:20px" plain v-if="!item.showButton"
								@click="changeCloseButton(item.userId, index)" :key="item.articleId">已关注</el-button>
						</div>
						<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
					</div>

				</div>

			</el-col>
			<el-col :span="6">
				<el-card>
					<i class="el-icon-edit"></i><span class="articleAndTagStyle">文章分类</span>
					<div v-for="item in allCategory" :key="item.categoryId">
						<el-col :span="8">
							<div class="hoverTagAndCategory" @click="findCategoryArticle(item.type, item.categoryId)">
								<h1><i class="el-icon-s-platform"></i></h1>
								<div>
									{{ item.title }}
								</div>
							</div>
						</el-col>
					</div>
				</el-card>
				<el-card style="margin-top:20px">
					<i class="el-icon-edit"></i><span class="articleAndTagStyle">文章分类</span>
					<div v-for="item in allTag" :key="item.id">
						<el-col :span="8">
							<div class="hoverTagAndCategory" @click="findCategoryArticle(item.type, item.id)">
								<h1><i class="el-icon-share"></i></h1>
								<div>
									{{ item.name }}
								</div>
							</div>
						</el-col>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<commentArticle ref="isShowCommentArticle" />
		<div>
			<div v-if="isShowLoading">
				<el-divider>正在加载<i class="el-icon-loading"></i></el-divider>
			</div>
			<div v-if="isShowOver">
				<el-divider>已经到底了<i class="el-icon-moon"></i></el-divider>
			</div>
		</div>
		<div class="footer">
			<a href="https://beian.miit.gov.cn/" target="_blank">版权所有ICP证：鲁ICP备2022028824号-1</a>
		</div>
	</el-container>

</template>

<script>
import commentArticle from '../component/commentArticle.vue';
import nagivation from '../component/nagivation.vue';
import api from '@/utils/api.js'
import apiuser from '@/utils/apiUser.js'
import { getToken, getUserName, getUserId } from '@/utils/auth'
export default {
	name: 'index',
	data() {
		return {
			isOpenApi: true,
			isShowLoading: false,
			isShowOver: false,
			textHeight: null,
			article: [],
			count: 10,
			expande: true,
			needShowExpande: false,
			articleLenght: 0,
			username: '',
			allCategory: [],
			allTag: [],
			tag: 'tag',
			category: 'category',
			dialogVisible: false,
			count: 2,
			attentionUser: [],
			articleNumber: 0,
			allArticleNumber: 0,
			userId: 0
		};
	},
	components: {
		nagivation, commentArticle
	},
	created() {
		var token = getToken()
		if (token == undefined) {
			if (this.article.length < 1) {
				this.indexArticle()
			}
			if (this.allCategory.length < 1) {
				this.getAllCategory()
			}
			if (this.allTag.length < 1) {
				this.getAllTag()
			}
			if (this.allArticleNumber == '') {
				this.getAllArticleNumber()

			}
		} else {
			var username = getUserName()
			if (this.article.length < 1) {
				this.indexArticle()
			}
			if (this.allCategory.length < 1) {
				this.getAllCategory()
			}
			if (this.allTag.length < 1) {
				this.getAllTag()
			}

			if (username == "" || username == null) {
				this.getUserInfo()
			}
			if (this.allArticleNumber == '') {
				this.getAllArticleNumber()

			}
		}

	},
	mounted() {
		this.article.forEach((ele, index) => {
			this.$set(this.article, index, Object.assign({}, ele, { status: null }))
		})
		// DOM 加载完执行
		this.$nextTick(() => {
			setTimeout(() => {
				this.calculateText()
			}, 1000)

		})

		window.onresize = () => {
			this.article.forEach((ele, index) => {
				this.$set(this.article, index, Object.assign({}, ele, { status: null }))
			})
			setTimeout(() => {
				this.calculateText()
			}, 1000)
		},
			window.addEventListener('scroll', this.scrollFn)
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.scrollFn)
		this.$bus.$emit('getUserId', this.userId)
	},
	methods: {
		findUser(userId) {
			this.userId = userId
			this.$router.push({
				name: 'userAndArticle'
			})
		},
		scrollFn() {
			let winheight = window.innerHeight || document.documentElement.height || document.body.clientHeight;
			let st = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			let docHeight = document.documentElement.scrollHeight || document.body.scrollHeight
			if (winheight + st >= docHeight) {
				this.isShowLoading = true
				this.isOpenApi = true
				this.isOpenApi = false
				var userId = getUserId()
				if (userId == "" || userId == undefined) {
					userId = -1
				}
				var articleNumber = this.article.length
				if (articleNumber == 0) {
					articleNumber = -1
				}
				if (this.allArticleNumber > articleNumber) {
					api.indexArticle(userId, articleNumber).then(res => {
						this.articleNumber = res.number
						if (res.data != null) {
							this.article = this.article.concat(res.data)
							this.articleNumber = res.number
							this.isOpenApi = true
							this.calculateText()
						} else {
							this.isOpenApi = false
							this.isShowLoading = false
							this.isShowOver = true
							this.articleNumber = res.number
							this.articleNumber = res.data.number
						}
					}).catch(error => {
					})
				} else {
					this.isShowLoading = false
					this.isShowOver = true
					this.articleNumber = this.allArticleNumber
				}

			}
		},
		expansion(articleId) {
			if (articleId > 0) {
				api.findArticleComment(articleId).then(res => {
					if (res.data.length > 0) {
						this.$refs.isShowCommentArticle.commentList = res.data
						this.$refs.isShowCommentArticle.articleId = articleId
						this.$refs.isShowCommentArticle.isShowEmpty = false
					} else {
						this.$refs.isShowCommentArticle.commentList = null
						this.$refs.isShowCommentArticle.articleId = articleId
						this.$refs.isShowCommentArticle.isShowEmpty = true
					}
					this.$refs.isShowCommentArticle.drawer = true
				})

			} else {
				this.$message({
					type: 'error',
					message: '查看评论失败'
				})
			}
		},
		updateViewCount(articleId) {
			api.updateArticleViewCount(articleId)
		},
		changeShowButton(ByUserId, index) {
			var token = getToken()
			if (token == '' || token == null) {
				this.$message({
					type: "error",
					message: "请先登录"
				})
				this.$router.push({
					name: 'login'
				})
			} else {
				var userId = getUserId()
				if (userId == "" || userId == null || userId == undefined) {
					userId = -1
				}
				apiuser.readyAttentionUser(userId, ByUserId).then(res => {
					if (res.data) {
						this.article[index].showButton = false
						this.$message({
							type: 'success',
							message: '成功关注'
						})
					} else {
						this.$message({
							type: 'error',
							message: '关注失败,请稍后再试'
						})
					}
				}).catch(error => {
				})
			}
		},
		changeCloseButton(ByUserId, index) {
			var userId = getUserId()
			if (userId == "") {
				userId = -1
			}
			apiuser.removeUserAttention(userId, ByUserId).then(res => {
				if (res.data) {
					this.article[index].showButton = true
					this.$message({
						type: 'success',
						message: '取消关注成功'
					})
				} else {
					this.$message({
						type: 'error',
						message: '关注失败,请稍后再试'
					})
				}
			}).catch(error => {
			})
		},
		indexArticle() {
			var userId = getUserId()
			if (userId == "" || userId == null) {
				userId = -1
			}
			var articleNumber = this.article.length
			if (articleNumber == 0) {
				articleNumber = -1
			}
			api.indexArticle(userId, articleNumber).then(res => {
				this.article = res.data
				this.articleLenght = res.number
				this.articleNumber = 5
			}).catch(error => {
			})
		},
		calculateText() {
			// 获取一行文字的height 计算当前文字比较列表文字
			if (this.article !== null && this.article.length > 0) {
				let oneHeight = this.$refs.more.scrollHeight
				let Height = this.$refs.more.offsetHeight
				let twoHeight = oneHeight * 2 || 60
				this.textHeight = `${twoHeight}px`
				let txtDom = this.$refs.textContainer
				for (let i = 0; i < txtDom.length; i++) {
					let curHeight = txtDom[i].offsetHeight
					if (curHeight > twoHeight) {
						this.$set(this.article, i, Object.assign({}, this.article[i], { status: true }))
					} else {
						this.$set(this.article, i, Object.assign({}, this.article[i], { status: null }))
					}
				}
			}
		},
		getAllCategory() {
			api.getAllCategory().then(res => {
				this.allCategory = res.data
				this.allCategory.forEach(item => {
					this.$set(this.allCategory, Object.assign(item, { type: 'category' }))
				})
			}).catch(error => {
			})
		},
		getAllTag() {
			api.getAllTag().then(res => {
				this.allTag = res.data
				this.allTag.forEach(item => {
					this.$set(this.allTag, Object.assign(item, { type: 'tag' }))
				})
			}).catch(error => {
			})
		},
		findCategoryArticle(type, id) {
			var userId = getUserId()
			if (userId == null) {
				userId = -1
			}
			api.indexArticleFind(type, id, userId).then(res => {
				if (res.data != null) {
					this.article = res.data
				} else {
					this.$message({
						type: 'error',
						message: '这个分类或是标签的文章为空,快去发布一篇吧'
					})
				}
			}).catch(error => {
			})
		},
		logoutTrue() {
			api.getLoginOut().then(res => {
			}).catch(error => {

			})
		},
		load() {
			this.count += 2
		},
		getUserInfo() {
			this.$store.dispatch('GetInfo').then(() => {
			})
		},
		indexAttentionUser() {
			apiuser.getAttentionUser().then(res => {
				this.attentionUser = res.data
			}).catch(error => {

			})
		},
		getAllArticleNumber() {
			api.findAllArticleNumber().then(res => {
				this.allArticleNumber = res.data
			})
		}
	},

}
</script>

<style lang="less" scoped>
	a{
		color: black;
		text-decoration: none;
	}
.footer{
	text-align: center;
}
.hoverTagAndCategory {
	width: 70px;
}

.hoverTagAndCategory:hover {
	background-color: #b4b4b4;
	width: 60px;
}

.articleAndTagStyle {
	display: inline-block;
	margin-left: 10px;
	font-weight: 1000;
}

.findUser:hover {
	color: #b4b4b4;
}

.findUser {
	font-weight: 1000;
	display: inline-block;
	height: 36px;
	line-height: 36px;
	margin-left: 20px;
}

.avatarAndUsername {
	display: flex;
	justify-content: flex-start;
	margin-left: -80px;

}

.item {
	margin-left: 15px;
	margin-bottom: 10px;
	margin-top: -10px;
}

.container {
	overflow: visible;
}

.content {
	display: flex;
	margin-bottom: 30px;
}

.text {
	position: relative;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2px;
	color: #666666;
}

.retract {
	position: relative;
	overflow: hidden;
}

.retract:after {
	content: '...';
	position: absolute;
	bottom: 0;
	right: 2px;
	width: 25px;
	padding-left: 30px;
	background: linear-gradient(to right, transparent, #fff 45%);
}

.btn {
	position: absolute;
	right: 0;
	bottom: -30px;
	font-size: 14px;
	line-height: 19px;
	letter-spacing: 2px;
	color: #FFAD41;
	cursor: pointer;
}

.more {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2px;
	color: #666666;
	visibility: hidden;
}

.categoryModule {
	display: flex;
	justify-content: center;
}

.categoryModule:hover {
	color: rgb(187, 235, 219);
}

.grid-content:hover {
	color: rgb(187, 235, 219);
}

.articleTitle:hover {
	color: cadetblue;
}
</style>